<template>
<div>
  <div id="scheduleMap" style="width: 600px;height:400px;"></div>
</div>
  
</template>
<script>
import echarts from 'echarts';

const hours = [
  '7a',
  '7.5a',
  '8a',
  '8.5a',
  '9a',
  '9.5a',
  '10a',
  '10.5a',
  '11a',
  '11.5a',
  '12p',
  '12.5p',
  '1p',
  '1.5p',
  '2p',
  '2.5p',
  '3p',
  '3.5p',
  '4p',
  '4.5p',
  '5p',
  '5.5p',
  '6p',
];
const days = [
  '签到处',
  '海报区',
  '分会场',
  '展厅',
  '主会场',
  '餐厅',
  '休闲区',
];

const day1 = [
  [0, 1, 1],
  [3, 2, 6],
  [0, 2, 55],
  [5, 3, 3],
  [3, 3, 434],
  [4, 3, 48],
  [1, 3, 20],
  [0, 3, 221],
  [3, 4, 162],
  [4, 4, 1502],
  [1, 4, 11],
  [0, 4, 83],
  [5, 5, 2],
  [3, 5, 47],
  [4, 5, 2081],
  [1, 5, 7],
  [6, 5, 2],
  [0, 5, 25],
  [5, 6, 2],
  [3, 6, 82],
  [4, 6, 2187],
  [1, 6, 9],
  [6, 6, 2],
  [0, 6, 37],
  [5, 7, 1],
  [3, 7, 147],
  [4, 7, 1745],
  [1, 7, 8],
  [6, 7, 16],
  [0, 7, 24],
  [3, 8, 40],
  [4, 8, 1443],
  [1, 8, 7],
  [6, 8, 20],
  [0, 8, 14],
  [3, 9, 31],
  [4, 9, 2248],
  [6, 9, 15],
  [0, 9, 14],
  [5, 10, 31],
  [3, 10, 23],
  [4, 10, 2032],
  [1, 10, 4],
  [6, 10, 3],
  [0, 10, 6],
  [5, 11, 740],
  [3, 11, 11],
  [4, 11, 2],
  [1, 11, 2],
  [6, 11, 80],
  [0, 11, 6],
  [5, 12, 67],
  [3, 12, 58],
  [1, 12, 43],
  [6, 12, 673],
  [0, 12, 14],
  [5, 13, 61],
  [3, 13, 118],
  [1, 13, 16],
  [6, 13, 666],
  [0, 13, 28],
  [5, 14, 21],
  [3, 14, 415],
  [1, 14, 133],
  [6, 14, 296],
  [0, 14, 124],
  [2, 14, 46],
  [5, 15, 2],
  [3, 15, 152],
  [1, 15, 9],
  [6, 15, 42],
  [0, 15, 17],
  [2, 15, 301],
  [5, 16, 1],
  [3, 16, 80],
  [1, 16, 26],
  [6, 16, 5],
  [0, 16, 38],
  [2, 16, 157],
  [3, 17, 71],
  [1, 17, 17],
  [6, 17, 25],
  [0, 17, 16],
  [2, 17, 129],
  [5, 18, 5],
  [3, 18, 130],
  [1, 18, 179],
  [6, 18, 309],
  [0, 18, 16],
  [2, 18, 248],
  [5, 19, 1],
  [3, 19, 53],
  [1, 19, 104],
  [6, 19, 321],
  [0, 19, 16],
  [2, 19, 32],
  [3, 20, 56],
  [1, 20, 7],
  [6, 20, 434],
  [0, 20, 15],
  [2, 20, 273],
  [3, 21, 23],
  [4, 21, 1],
  [1, 21, 31],
  [0, 21, 8],
  [2, 21, 3]
];
const day2 = [
  [0, 1, 1],
  [0, 2, 57],
  [5, 3, 5],
  [3, 3, 702],
  [4, 3, 64],
  [1, 3, 60],
  [0, 3, 397],
  [5, 4, 1],
  [3, 4, 43],
  [4, 4, 2453],
  [1, 4, 9],
  [0, 4, 31],
  [5, 5, 1],
  [3, 5, 53],
  [4, 5, 2537],
  [0, 5, 37],
  [5, 6, 2],
  [3, 6, 132],
  [4, 6, 2234],
  [1, 6, 15],
  [6, 6, 5],
  [0, 6, 26],
  [3, 7, 67],
  [4, 7, 1516],
  [1, 7, 7],
  [6, 7, 14],
  [0, 7, 18],
  [5, 8, 1],
  [3, 8, 40],
  [4, 8, 2490],
  [1, 8, 6],
  [6, 8, 20],
  [0, 8, 24],
  [5, 9, 36],
  [3, 9, 39],
  [4, 9, 2362],
  [1, 9, 5],
  [6, 9, 28],
  [0, 9, 10],
  [5, 10, 1288],
  [3, 10, 27],
  [1, 10, 8],
  [6, 10, 122],
  [0, 10, 6],
  [5, 11, 131],
  [3, 11, 209],
  [1, 11, 203],
  [6, 11, 1020],
  [0, 11, 128],
  [5, 12, 130],
  [3, 12, 870],
  [1, 12, 41],
  [6, 12, 977],
  [0, 12, 24],
  [5, 13, 34],
  [3, 13, 924],
  [4, 13, 1],
  [1, 13, 86],
  [6, 13, 430],
  [0, 13, 84],
  [2, 13, 6],
  [5, 14, 2],
  [3, 14, 243],
  [1, 14, 14],
  [6, 14, 40],
  [0, 14, 15],
  [2, 14, 169],
  [5, 15, 1],
  [3, 15, 122],
  [1, 15, 20],
  [6, 15, 16],
  [0, 15, 39],
  [2, 15, 70],
  [3, 16, 81],
  [1, 16, 17],
  [6, 16, 20],
  [0, 16, 13],
  [2, 16, 170],
  [3, 17, 135],
  [1, 17, 212],
  [6, 17, 372],
  [0, 17, 14],
  [2, 17, 470],
  [5, 18, 2],
  [3, 18, 280],
  [1, 18, 30],
  [6, 18, 1325],
  [0, 18, 13],
  [2, 18, 41],
  [5, 19, 1],
  [3, 19, 26],
  [1, 19, 48],
  [6, 19, 91],
  [0, 19, 15],
  [2, 19, 572],
  [5, 20, 6],
  [3, 20, 28],
  [4, 20, 1],
  [1, 20, 25],
  [0, 20, 16],
  [2, 20, 5],
  [5, 21, 354],
  [5, 22, 174]
];
const day3 = [
  [0, 2, 84],
  [3, 3, 386],
  [4, 3, 80],
  [1, 3, 20],
  [0, 3, 305],
  [3, 4, 173],
  [4, 4, 1560],
  [1, 4, 43],
  [0, 4, 150],
  [2, 4, 18],
  [3, 5, 74],
  [4, 5, 1157],
  [1, 5, 3],
  [6, 5, 3],
  [0, 5, 17],
  [2, 5, 125],
  [5, 6, 1],
  [3, 6, 100],
  [4, 6, 666],
  [1, 6, 46],
  [6, 6, 21],
  [0, 6, 25],
  [2, 6, 73],
  [5, 7, 1],
  [3, 7, 62],
  [4, 7, 662],
  [1, 7, 86],
  [6, 7, 41],
  [0, 7, 12],
  [2, 7, 842],
  [5, 8, 6],
  [3, 8, 53],
  [4, 8, 700],
  [1, 8, 149],
  [6, 8, 38],
  [0, 8, 8],
  [2, 8, 1],
  [3, 9, 11],
  [4, 9, 9],
  [0, 9, 7],
  [4, 10, 1],
  [0, 10, 1]
];

const data = [day1, day2, day3];
const title = ['一', '二', '三'];
export default {
  name: 'scheduleMap',
  mounted() {
    var option = {
      tooltip: {
        position: 'top',
      },
      title: [
        {
          text: '第一天日程安排',

          left: 'center',
        },
      ],
      singleAxis: [],
      series: [],
    };
    const myChart = echarts.init(
      document.getElementById('scheduleMap'),
      'dark'
    );
    echarts.util.each(days, function(day, idx) {
      option.title.push({
        textBaseline: 'middle',
        top: ((idx + 0.5) * 100) / 7 + '%',
        text: day,
        textStyle: {
          fontSize: 14,
        },
      });
      option.singleAxis.push({
        left: 100,
        type: 'category',
        boundaryGap: false,
        data: hours,
        top: (idx * 100) / 7 + 5 + '%',
        height: 100 / 7 - 10 + '%',
        axisLabel: {
          interval: 1,
        },
      });
      option.series.push({
        singleAxisIndex: idx,
        coordinateSystem: 'singleAxis',
        type: 'scatter',
        data: [],
        symbolSize: function(dataItem) {
          return Math.min(dataItem[1] / 10, 50);
        },
      });
    });
    echarts.util.each(data[0], function(dataItem) {
      option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
    });
    myChart.setOption(option, true);
    this.$bus.$on('daychange', day => {
      var option = {
        tooltip: {
          position: 'top',
        },
        title: [
          {
            text: '第' + title[day - 1] + '天日程安排',
            textStyle: {
              fontWeight: 'bold',
            },
            left: 'center',
          },
        ],
        singleAxis: [],
        series: [],
      };
      echarts.util.each(days, function(day, idx) {
        option.title.push({
          textBaseline: 'middle',
          top: ((idx + 0.5) * 100) / 7 + '%',
          text: day,
          textStyle: {
            fontWeight: 'normal',
          },
        });
        option.singleAxis.push({
          left: 100,
          type: 'category',
          boundaryGap: false,
          data: hours,
          top: (idx * 100) / 7 + 5 + '%',
          height: 100 / 7 - 10 + '%',
          axisLabel: {
            interval: 1,
          },
        });
        option.series.push({
          singleAxisIndex: idx,
          coordinateSystem: 'singleAxis',
          type: 'scatter',
          data: [],
          symbolSize: function(dataItem) {
            return Math.min(dataItem[1] / 10, 50);
          },
        });
      });
      echarts.util.each(data[day - 1], function(dataItem) {
        option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
      });
      myChart.setOption(option, true);
    });
  },
};
</script>
